<script setup>

import {computed, reactive, watch} from "vue";

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  labelKey: {
    type: String,
    default: 'label'
  },
  valueKey: {
    type: String,
    default: 'value'
  },
  iconPathKey: {
    type: String,
    default: 'icon'
  },
  iconCheckedPathKey:{
    type: String,
    default: 'iconChecked'
  },
  modelValue:{
    type:[String,Number],
    default:0
  }
})

const emits = defineEmits(['update:modelValue','change'])

const tabs = computed(() => {
  let _data = props.data;

  return _data;
})

const dataLabel = function (item) {
  return item[props.labelKey]
}

const dataValue = function (item) {
  return item[props.valueKey]
}


const dataIconChecked = function (item) {
  let _icon = item[props.iconCheckedPathKey];
  return _icon
}
const dataIcon = function (item) {
  let _icon = item[props.iconPathKey];
  return _icon
}

const form = reactive({
  value: ''
})

watch(()=>props.modelValue,(v)=>{
  form.value = v;
  emits('update:modelValue',form.value)
  emits("change",form.value)
},{immediate:true,deep:true})

const onTabChange = function ({detail}) {
  form.value = detail.value;
  emits('update:modelValue',form.value)
  emits("change",form.value)
}
</script>

<template>
  <div class="good-tab-warp">
    <div class="tabs-warp">
      <div class="radio-group-warp">
        <radio-group class="radio-group goods"
                     @change="onTabChange">

          <label class="group-item"
                 v-for="item in tabs">

            <image
              :src="dataIconChecked(item)"
              class="input__icon"
              v-if="form.value === dataValue(item)"
              key="checked-icon"
              mode="aspectFit"
            ></image>
            <image
              :src="dataIcon(item)"
              class="input__icon"
              v-else
              key="un-checked-icon"
              mode="aspectFit"
            ></image>

            <radio class="group-item__input"
                   :value="dataValue(item)"
                   :checked="form.value === dataValue(item)"
            ></radio>
            <span class="group-item__label">
              {{ dataLabel(item) }}
            </span>
          </label>

        </radio-group>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.good-tab-warp {
  .tabs-warp {

    .radio-group-warp {
      display: block !important;
      border-top: 1px solid #eeeeee;
      background-color: #fff;
      padding-bottom: 32rpx;

      .radio-group {

        &.goods {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-around;

          .group-item {
            display: flex;
            flex-direction: column;
            justify-items: center;
            align-items: center;

            .group-item__input {

              &[checked] + .group-item__label {
                color: #008af9;
                background-color: #fff !important;
              }
            }

            .input__icon {
              width: 24px;
              height: 24px;
              display: block;
              position: relative;
              top: 3px;
            }

            .group-item__label {
              background-color: #fff;
              color: #525252;
              font-size: 12px;
            }


          }
        }

      }
    }
  }
}
</style>
